// cover some element-ui styles

.kyland-breadcrumb__inner,
.kyland-breadcrumb__inner a {
  font-weight: 400 !important;
}

.kyland-upload {
  input[type='file'] {
    display: none !important;
  }
}

.kyland-upload__input {
  display: none;
}

.cell {
  .kyland-tag {
    margin-right: 0px;
  }
}

.small-padding {
  .cell {
    padding-left: 5px;
    padding-right: 5px;
  }
}

.fixed-width {
  .kyland-button--mini {
    padding: 7px 10px;
    width: 60px;
  }
}

.status-col {
  .cell {
    padding: 0 10px;
    text-align: center;

    .kyland-tag {
      margin-right: 0px;
    }
  }
}

// to fixed https://github.com/ElemeFE/element/issues/2461
.kyland-dialog {
  transform: none;
  left: 0;
  position: relative;
  margin: 0 auto;
}
.el-dialog__small {
  width: 470px;
}
.el-dialog__default {
  width: 700px;
}
.el-dialog__large {
  width: 740px;
}
.el-dialog__xl {
  width: 1040px;
}
.el-dialog__xxl {
  width: 80%;
  max-width: 1440px;
}
// refine element ui upload
.upload-container {
  .kyland-upload {
    width: 100%;

    .kyland-upload-dragger {
      width: 100%;
      height: 200px;
    }
  }
}

// divider
.form-divider {
  margin-top: 12px;
}
.kyland-divider__text.is-top {
  top: -4px;
  transform: translateY(-100%);
  background: transparent;
  padding: 0;
  font-size: 16px;
}

// dropdown
.kyland-dropdown-menu {
  a {
    display: block;
  }
}

// fix date-picker ui bug in filter-item
.kyland-range-editor.kyland-input__inner {
  display: inline-flex !important;
}

// to fix el-date-picker css style
.kyland-range-separator {
  box-sizing: content-box;
}

.kyland-menu--collapse > div > .kyland-submenu > .kyland-submenu__title .kyland-submenu__icon-arrow {
  display: none;
}

.kyland-dropdown .kyland-dropdown-link {
  color: var(--el-color-primary) !important;
}

.kyland-table__cell .kyland-link,
.kyland-link__group .kyland-link {
  margin: 0 5px;
  &:first-child {
    margin-left: 0;
  }
  &:last-child {
    margin-right: 0;
  }
}

.form-inline {
  .kyland-input {
    width: 200px;
  }
}

.input__notice {
  line-height: 32px;
  font-size: 12px;
  color: #888;
}

.kyland-button--primary.is-plain {
  background-color: transparent;
  &:hover {
    color: #B4AF6E;
    border-color: #C4C088;
  }
  &:active,
  &:focus {
    color: #B4AF6E;
    border-color: #C4C088;
  }
  &.is-disabled {
    border-color: #dfdfdf;
    color: #dfdfdf;
    background-color: transparent;
    &:focus,
    &:active,
    &:hover {
      border-color: #dfdfdf;
      color: #dfdfdf;
      background-color: transparent;
    }
  }
}

.kyland-link.is-disabled {
  color: #dfdfdf;
}
.kyland-dialog__header {
  padding: 0px 30px 10px;
}
.kyland-dialog__body {
  padding: 10px 30px;
}
.el-dialog__small {
  .kyland-dialog__body {
    padding: 10px 20px;
  }
}
.kyland-table--border td.kyland-table__cell {
  border-right-color: transparent;
}
.kyland-dialog__headerbtn {
  top: 6px;
  right: 6px;
  height: 36px;
  width: 36px;
  font-size: 22px;
  z-index: 2;
}
.kyland-dialog__footer {
  padding: 20px 30px;
  border-top: 1px solid #dfdfdf;
}

.kyland-input-number.is-without-controls {
  .kyland-input__inner {
    text-align: left;
  }
}
.form-readonly {
  .readonly__wrap {
    padding: 6px 10px;
    background-color: #fbfbfb;
    box-shadow: 0 0 0 1px #f1f1f1 inset;
    color: #333333;
    min-height: 32px;
    line-height: 20px;
  }
  .kyland-input.is-disabled,
  .kyland-textarea.is-disabled {
    cursor: default;
  }
  .kyland-input.is-disabled .kyland-input__wrapper,
  .kyland-textarea.is-disabled .kyland-textarea__inner {
    background-color: #fbfbfb;
    box-shadow: 0 0 0 1px #f1f1f1 inset;
    cursor: default;
  }
  .kyland-input.is-disabled .kyland-input__inner,
  .kyland-textarea.is-disabled .kyland-textarea__inner {
    color: #333;
    cursor: default;
    -webkit-text-fill-color: #333;
  }
}

.kyland-tabs--card {
  .kyland-tabs__header {
    margin-bottom: 0;
    .kyland-tabs__nav {
      border-radius: 0;
    }
  }
  .kyland-tabs__item.is-active {
    background-color: #23cefd;
    color: #fff;
  }
}

$border-color: #3e4f54;
$border-color-error: #ff7800;
$border-radius: 0;

$label-color-error: #ff7800;
$input-border-color-focus: #60787f;
$input-placeholder-color: #60787f;
$input-bg-color: #0f2b3b;

$popper-bg-color: #0f2b3b;
$popper-li-hover-bg-color: #134b5f;

$tab-item-bg-color: #213b48;

$date-range-cell-bg-color: #134b5f;
$date-range-active-bg-color: #25cbfa;
$date-active-color: #25cbfa;
$date-btn-confirm-color: #25cbfa;

$scrollbar-bg-color: #134b61;

@mixin btn-primary-plain-dark {
  background: #02475a;
  border: 1px solid #25cbfa;
  border-radius: $border-radius;
  color: #fff;
  &.is-disabled:hover {
    background: #02475a;
    border: 1px solid #25cbfa;
    color: #fff;
  }
  &:hover {
    background: #03556c;
  }
  &:focus {
    background: #023d4d;
  }
}

@mixin btn-warning-plain-dark {
  background: #5E3E11;
  border: 1px solid #C7A233;
  border-radius: $border-radius;
  color: #fff;
  &.is-disabled:hover {
    background: #F4A424;
    border: 1px solid #C7A233;
    color: #fff;
  }
  &:hover {
    background: #b97516;
  }
  &:focus {
    background: #b97516;
  }
}

@mixin btn-plain-dark {
  background: #0f2b3b;
  border: 1px solid #3e4f54;
  border-radius: $border-radius;
  color: #7a7a7a;
  &:hover {
    border-color: #86989d;
    color: #fff;
  }
  &:focus {
    border-color: #86989d;
    color: #fff;
    background: #0c2534;
  }
  &.is-disabled:hover {
    background: #0f2b3b;
    border: 1px solid #3e4f54;
    color: #7a7a7a;
  }
}

.kyland-tabs__dark.kyland-tabs {
  .kyland-tabs__header {
    border-bottom-color: $border-color;
    height: 37px;
    margin-bottom: 0;
    .kyland-tabs__nav {
      border-top: 0 none;
      border-right: 0 none;
      border-left: 0 none;
      border-radius: $border-radius;
      .kyland-tabs__item {
        border-left-color: $border-color;
        color: #fff;
        height: 36px;
        line-height: 36px;
        min-width: 120px;
        text-align: center;
        background-color: $tab-item-bg-color;
        font-weight: 300;
        &.is-active {
          background: linear-gradient(0deg, rgba(36, 206, 252, 0.36), rgba(36, 206, 252, 0));
          border: 1px solid #25cbfa;
        }
      }
    }
  }
  .kyland-tabs__content {
    border: 1px solid $border-color;
    border-top: 0 none;
  }
}

.kyland-form__dark {
  .kyland-form-item__label {
    color: #fff;
  }
  &.kyland-form--large {
    .kyland-form-item__label {
      font-size: 16px;
      font-weight: 400;
    }
  }
  .kyland-form-item {
    &.kyland-form-item--large {
      margin-bottom: 30px;
    }
    &.is-error {
      .kyland-input__wrapper {
        box-shadow: 0 0 0 1px $border-color-error inset;
      }
    }
    &.is-required {
      .kyland-form-item__label {
        &::before {
          color: $label-color-error;
        }
      }
    }
  }
  .kyland-form-item__error {
    color: $label-color-error;
  }
}

.kyland-input__dark,
.kyland-date-picker__dark,
.kyland-time-picker__dark {
  .kyland-input__wrapper {
    background-color: $input-bg-color;
    border-radius: $border-radius;
    box-shadow: 0 0 0 1px $border-color inset;
    &.is-focus {
      box-shadow: 0 0 0 1px $input-border-color-focus inset;
    }
    .kyland-input__inner {
      color: #fff;
      &::placeholder {
        color: $input-placeholder-color;
      }
    }
  }
}

.kyland-date-picker__dark,
.kyland-time-picker__dark {
  &.kyland-range-editor {
    box-shadow: 0 0 0 1px $border-color inset;
    background-color: $input-bg-color;
    border-radius: $border-radius;
  }
  .kyland-range-separator {
    color: #fff;
  }
  &.kyland-date-editor.kyland-input__wrapper:hover,
  &.kyland-range-editor.is-active {
    box-shadow: 0 0 0 1px $input-border-color-focus inset;
  }
  &.kyland-date-editor .kyland-range-input {
    color: #fff;
    &::placeholder {
      color: $input-placeholder-color;
    }
  }
  .kyland-input__prefix {
    left: 12px;
  }
}

.kyland-select__dark.kyland-select {
  .kyland-input__inner {
    color: #fff;
    &::placeholder {
      color: $input-placeholder-color;
    }
    &:hover {
      background: transparent;
    }
    &.is-focus {
        box-shadow: 0 0 0 1px $input-border-color-focus inset !important;

    }
  }
  .kyland-input {
    .kyland-input__wrapper {
      background-color: $input-bg-color;
      border-radius: $border-radius;
      box-shadow: 0 0 0 1px $border-color inset;
    }
    &.is-focus {
      .kyland-input__wrapper {
        box-shadow: 0 0 0 1px $input-border-color-focus inset !important;
      }
    }
  }
  .kyland-select__tags .kyland-tag--info {
    background: #134b5f;
    color: #fff;
    &.is-hit {
      border-color: transparent;
    }
  }
}

.kyland-popper__dark.is-light,
.kyland-popper__dark {
  border-color: $border-color;
  background: $popper-bg-color;
  border-radius: $border-radius;
  .kyland-popper__arrow {
    &::before {
      background-color: $popper-bg-color;
      border-color: $border-color;
    }
  }
  .kyland-autocomplete-suggestion {
    background: transparent;
    border: 0 none;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }
  .kyland-autocomplete-suggestion.is-loading li:hover,
  .kyland-select-dropdown__list.is-loading li:hover {
    background: transparent;
  }
  li {
    color: #fff;
    background: transparent;
    &:hover,
    &.selected,
    &.hover {
      background: $popper-li-hover-bg-color;
    }
  }
  &.kyland-select-dropdown,
  &.kyland-select-dropdown.is-multiple {
    &.kyland-popper__dark {
      background-color: transparent;
      border: 0 none;
      margin: 0;
    }
    .kyland-select-dropdown__item {
      &.selected,
      &.hover {
        color: #fff;
        background: $popper-li-hover-bg-color;
      }
    }
  }
  .kyland-picker-panel,
  .kyland-time-panel {
    background: transparent;
    color: #fff;
    border: 0 none;
    font-size: 14px;
    margin: 0;
    box-shadow: 0 0 transparent;
    .kyland-date-table {
      font-size: 14px;
    }
    .kyland-date-picker__header--bordered {
      border-bottom: 0 none;
    }
    .kyland-date-picker__header-label,
    .kyland-picker-panel__icon-btn {
      color: #fff;
    }
    .kyland-picker-panel__icon-btn:hover {
      color: $date-active-color;
    }
    .kyland-date-table th {
      color: #fff;
      border-bottom: 0 none;
    }
    .kyland-date-table td.next-month,
    .kyland-date-table td.prev-month {
      color: #39505b;
    }
    .kyland-date-table td.current:not(.disabled) .kyland-date-table-cell__text {
      background-color: $date-active-color;
      color: #fff;
    }
    .kyland-date-table td.today .kyland-date-table-cell__text {
      color: $date-active-color;
      font-weight: normal;
    }
    .kyland-year-table td .cell,
    .kyland-month-table td .cell {
      font-size: 14px;
      color: #fff;
    }
    .kyland-year-table td.current:not(.disabled) .cell,
    .kyland-month-table td.current:not(.disabled) .cell {
      color: $date-active-color;
    }
    .kyland-date-table td.in-range .kyland-date-table-cell,
    .kyland-month-table td.in-range div {
      background: $date-range-cell-bg-color;
    }
    .kyland-date-table td.start-date .kyland-date-table-cell__text,
    .kyland-date-table td.end-date .kyland-date-table-cell__text,
    .kyland-month-table td.start-date .cell,
    .kyland-month-table td.end-date .cell {
      background-color: $date-range-active-bg-color;
    }
    .kyland-date-table td.available:hover {
      color: $date-active-color;
    }
    .kyland-date-range-picker__content.is-left {
      border-right-color: $border-color;
    }
    .kyland-input {
      .kyland-input__wrapper {
        background-color: $input-bg-color;
        border-radius: $border-radius;
        box-shadow: 0 0 0 1px $border-color inset;
        &.is-focus {
          box-shadow: 0 0 0 1px $input-border-color-focus inset;
        }
        .kyland-input__inner {
          color: #fff;
          &::placeholder {
            color: $input-placeholder-color;
          }
        }
      }
      &.is-disabled {
        .kyland-input__inner {
          background-color: transparent;
        }
      }
    }
    .kyland-time-panel__content::after,
    .kyland-time-panel__content::before {
      border-top-color: transparent;
      border-bottom-color: transparent;
    }

    .kyland-date-picker__time-header {
      border-bottom: 0 none;
    }
    .kyland-time-panel {
      background: #113447;
      border: 0 none;
    }
    .kyland-time-panel__footer {
      border-top: 0 none;
    }
    .kyland-time-panel__btn.cancel {
      color: #fff;
    }
    .kyland-time-panel__btn.confirm {
      color: $date-btn-confirm-color;
    }
    .kyland-time-panel__content::before {
      border-top-color: $border-color;
      border-bottom-color: $border-color;
    }
    .kyland-date-range-picker__time-header {
      border-bottom: 0 none;
    }
    .kyland-scrollbar__thumb {
      background: $scrollbar-bg-color;
    }
    .kyland-time-spinner__item.is-active {
      color: $date-active-color;
      &:hover {
        background: none;
      }
    }
    .kyland-time-spinner__item:hover:not(.is-disabled):not(.is-active) {
      background: $date-range-cell-bg-color;
    }
    .kyland-picker-panel__footer {
      background: transparent;
      border-top: 0 none;
      .kyland-picker-panel__link-btn.is-plain {
        @include btn-primary-plain-dark;
      }
      .kyland-picker-panel__link-btn.is-text {
        color: #fff;
        &:hover {
          background: transparent;
        }
      }
    }
  }
}

.kyland-popper.is-dark {
  background-color: $popper-bg-color;
  border-color: transparent;
  .kyland-popper__arrow {
    &::before {
      background-color: $popper-bg-color;
      border-color: $popper-bg-color;
    }
  }
}

.kyland-button__dark {
  &.kyland-button.is-plain {
    @include btn-plain-dark;
    &.kyland-button--primary.is-plain {
      @include btn-primary-plain-dark;
    }
    &.kyland-button--warning.is-plain {
      @include btn-warning-plain-dark;
    }
  }
}

.kyland-table__dark.kyland-table {
  background-color: transparent;
  .kyland-table__header-wrapper {
    th {
      background-color: rgba(255, 255, 255, 0.2) !important;
      color: #fff !important;
      font-weight: 500;
    }
  }
  tr {
    background-color: transparent;
  }
  td.kyland-table__cell,
  th.kyland-table__cell.is-leaf {
    border-bottom: 0 none;
    color: #fff !important;
  }
  td.kyland-table__cell {
    padding: 13px 0;
  }
  .kyland-table__body tr:hover > td.kyland-table__cell {
    background-color: rgba(255, 255, 255, 0.05);
  }
  .kyland-table__inner-wrapper::before {
    height: 0;
  }
  &::before {
    height: 0;
  }
  &.kyland-table--striped {
    .kyland-table__body tr.kyland-table__row--striped td.kyland-table__cell {
      background-color: rgba(255, 255, 255, 0.05);
    }
  }
}

.kyland-checkbox__dark.kyland-checkbox {
  .kyland-checkbox__inner {
    border-color: #7c959c;
    background-color: transparent;
  }
  .kyland-checkbox__label {
    color: #fff;
    padding-left: 4px;
  }
  &.is-checked {
    .kyland-checkbox__label {
      color: #fff;
    }
    .kyland-checkbox__inner {
      background-color: #25cbfa;
      border-color: #25cbfa;
    }
  }
}


.tree-line {
  .kyland-tree__empty-block {
    min-height: 0;
  }
  .kyland-tree-node__label {
    flex: 1;
  }
  .kyland-tree-node {
    position: relative;
    padding-left: 6px; // 缩进量
  }
  .kyland-tree-node__children {
    padding-left: 18px; // 缩进量
  }

  // 竖线
  .kyland-tree-node::before {
    content: '';
    height: 100%;
    width: 1px;
    position: absolute;
    left: -3px;
    top: -26px;
    border-width: 1px;
    border-left: 1px dashed #bababa;
  }
  // 当前层最后一个节点的竖线高度固定
  .kyland-tree-node:last-child::before {
    height: 38px; // 可以自己调节到合适数值
  }

  // 横线
  .kyland-tree-node::after {
    content: '';
    width: 24px;
    height: 20px;
    position: absolute;
    left: -3px;
    top: 12px;
    border-width: 1px;
    border-top: 1px dashed #bababa;
  }

  // 去掉最顶层的虚线，放最下面样式才不会被上面的覆盖了
  & > .kyland-tree-node::after {
    border-top: none;
  }
  & > .kyland-tree-node::before {
    border-left: none;
  }

  // 展开关闭的icon
  .kyland-tree-node__expand-icon {
    font-size: 16px;
    // 叶子节点（无子节点）
    &.is-leaf {
      color: transparent;
      // display: none; // 也可以去掉
    }
  }
}

// 去除card的边框
.box-card-style.kyland-card {
  border: 0;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  border-radius: 0;
}

